<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">平台</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input
            placeholder="请输入内容"
            v-model="queryinfo.keyword"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showadd()">添加按钮</el-button>
        </el-col>
      </el-row>
      <!-- 权限列表区域 -->
      <el-table
        :data="authList"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
        stripe
        :tree-props="{ children: 'son' }"
      >
        <el-table-column
          prop="id"
          label="ID"
          sortable
          width="180"
        ></el-table-column>
        <el-table-column
          prop="auth_name"
          label="权限名称"
          sortable
          width="180"
        ></el-table-column>
        <el-table-column prop="auth_c" label="控制器名"></el-table-column>
        <el-table-column prop="auth_a" label="方法名"></el-table-column>
        <el-table-column prop="is_nav" label="是否菜单">
          <template slot-scope="scope">
            <span v-if="scope.row.is_nav === 0">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column prop="level" label="权限等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === 0" type="success">一级</el-tag>
            <el-tag v-else-if="scope.row.level === 1" type="info">二级</el-tag>
            <el-tag v-else-if="scope.row.level === 2" type="warning"
              >三级</el-tag
            >
            <el-tag v-else type="danger">四级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!--{{scope.row.id}}-->
            <i
              class="el-icon-plus"
              size="mini"
              @click="showChildAddAuth(scope.row)"
            ></i>
            &nbsp;
            <i
              class="el-icon-edit"
              size="mini"
              @click="showEditAddAuth(scope.row)"
            ></i>
            <i
              class="el-icon-delete"
              size="mini"
              @click="deleteAuth(scope.row.id)"
            ></i>
          </template>
        </el-table-column>

        <el-dialog
          title="添加用户"
          :visible.sync="dialogVisibleadd"
          width="30%"
          :before-close="handleClose"
        >
          <!-- 添加表单 -->
          <el-form :model="addDate" ref="ruleForm" label-width="80px">
            <el-form-item label="用户名" prop="auth_c">
              <el-input ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="auth_a">
              <el-input ></el-input>
            </el-form-item>
        
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleadd = false">取 消</el-button>
            <el-button type="primary" @click="add()">确 定</el-button>
          </span>
        </el-dialog>
      </el-table>

    </el-card>

  </div>

</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      authList: [],
      queryinfo: {
        keyword: "",
      },
      addDate:{
        auth_a:"",
        auth_c:""
      },
        dialogVisibleadd: false,
    };
  },
  methods: {
    getAuthList() {
      this.$http.get("/auth/index",{params:this.authList}).then((res) => {
        // console.log(res);
        var { data } = res.data;
        // console.log(data);
        this.authList = data;
      });
    },
  },
  mounted() {
    this.getAuthList();
  },
};
</script>
<style scoped>
.el-card {
  margin-top: 20px;
  width: 100%;
}
.el-table {
  margin-top: 15px;
  margin-bottom: 20px;
}
</style>
